/**
 * TODOLIST 模块 老浏览器适配
 * 使用了babel进行转换 https://babeljs.io
 * @author Handle
 * @version 0.1
 */
"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

(function () {
  var INPUT_PLACE_HOLDER = "请添加项目";
  var ADD_ITEM_BTN_HTML = "Add a todo";
  var SELECT_ALL_BTN_HTML = "All";
  var SELECT_COMPLETE_BTN_HTML = "Complete";
  var SELECT_ACTIVE_BTN_HTML = "Active";

  var TodoItem = function () {
    /**
     * @description 构造函数
     * @param {String} todoStr TODO项文字
     * @param {boolean} state 是否已经完成
     */
    function TodoItem(todoStr, state) {
      _classCallCheck(this, TodoItem);

      //创建div对象
      /**
       *  @type {HTMLDivElement} dom元素
       */
      this.dom = document.createElement("div");
      this.dom.innerText = todoStr;

      /**
       *  @type {boolean} 选中状态
       */
      this.state;
      //记录状态
      if (state != null) {
        this.state = state;
      } else {
        this.state = false;
      }

      //重新指向this
      var thisObj = this;
      //绑定点击事件
      this.dom.addEventListener("click", function () {
        thisObj.changeState();
      });

      //刷新style
      this.refreshStyle();
    }

    _createClass(TodoItem, [{
      key: "show",
      value: function show() {
        this.dom.style.display = "block";
      }
    }, {
      key: "hide",
      value: function hide() {
        this.dom.style.display = "none";
      }
    }, {
      key: "changeState",
      value: function changeState() {
        this.state = !this.state;
        this.refreshStyle();
      }
    }, {
      key: "refreshStyle",
      value: function refreshStyle() {
        if (this.state) {
          this.dom.className = "todo-item-complete";
        } else {
          this.dom.className = "todo-item-active";
        }
      }
    }]);

    return TodoItem;
  }();

  /**
   * @description 指定目标，创建一个div
   * @type {void} 无返回值
   * @param {HTMLElement} target 要操作的目标dom对象
   */


  function createTODOList(target) {
    //获取到目标
    //const divElement = document.getElementById(target);
    var divElement = target;

    //三个主要部件
    var header = document.createElement("header");
    var list = document.createElement("div");
    var footer = document.createElement("footer");

    //大部件下的小部件
    var todoInput = document.createElement("input");
    var addItemBtn = document.createElement("button");

    var selectAllBtn = document.createElement("button");
    var selectCompleteBtn = document.createElement("button");
    var selectCActiveBtn = document.createElement("button");

    //基本属性设置
    todoInput.type = "text";
    todoInput.placeholder = INPUT_PLACE_HOLDER;

    addItemBtn.innerHTML = ADD_ITEM_BTN_HTML;

    selectAllBtn.innerHTML = SELECT_ALL_BTN_HTML;
    selectCompleteBtn.innerHTML = SELECT_COMPLETE_BTN_HTML;
    selectCActiveBtn.innerHTML = SELECT_ACTIVE_BTN_HTML;

    /**
     * @type {Array<TodoItem>} 存储所有TODO项目对象
     */
    var todoListObj = new Array();

    //基本className设置
    todoInput.className = "todo-input";
    addItemBtn.className = "todo-add-item";

    list.className = "todo-item-list";

    selectAllBtn.className = "todo-select-all";
    selectCompleteBtn.className = "todo-select-complete";
    selectCActiveBtn.className = "todo-select-active";

    //绑定Add a TODO按钮事件
    addItemBtn.addEventListener("click", function () {
      addItem();
    });

    //绑定文本框回车事件
    todoInput.addEventListener("keypress", function (e) {
      if (e.which == 13 || e.which == 10) {
        addItem();
        e.preventDefault();
      }
    });

    //绑定All按钮事件
    selectAllBtn.addEventListener("click", function () {
      selectBy("any");
    });

    //绑定Complete按钮事件
    selectCompleteBtn.addEventListener("click", function () {
      selectBy(true);
    });

    //绑定active按钮事件
    selectCActiveBtn.addEventListener("click", function () {
      selectBy(false);
    });

    /**
     * @description 按照特定规则过滤TODO项目
     * @type {void} 无返回值
     * @param {'any'|boolean} selector 按照选定规则过滤(T已完成/F未完成/'any')
     */
    function selectBy(selector) {
      var mode = -1;
      if (typeof selector === "string" && selector == "any") {
        mode = 0;
      } else if (typeof selector == "boolean") {
        if (selector) {
          mode = 1;
        } else {
          mode = 2;
        }
      }
      todoListObj.forEach(function (e) {
        switch (mode) {
          case 0:
            e.show();
            break;
          case 1:
            if (e.state) {
              e.show();
            } else {
              e.hide();
            }
            break;
          case 2:
            if (e.state) {
              e.hide();
            } else {
              e.show();
            }
            break;
          default:
        }
      });
    }

    /**
     * @description 按照特定条件筛选TODO
     * @type {void} 无返回值
     */
    function addItem() {
      var todoStr = todoInput.value;
      if (todoStr.length < 1) {
        return;
      }
      var index = todoListObj.push(new TodoItem(todoStr, false)) - 1;
      list.appendChild(todoListObj[index].dom);
      todoInput.value = null;
    }

    //组合dom对象，并输出到目标div
    header.appendChild(todoInput);
    header.appendChild(addItemBtn);

    footer.appendChild(selectAllBtn);
    footer.appendChild(selectCompleteBtn);
    footer.appendChild(selectCActiveBtn);

    divElement.appendChild(header);
    divElement.appendChild(list);
    divElement.appendChild(footer);
  }

  window["createList"] = createTODOList;
})();